<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .video-container{
            width: 400px;
        }

       
    </style>
</head>
<body>
    <button>来个好玩的</button>
    <button>下去吧</button>
    <hr>

    <div id="root"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class App extends React.Component{
            state = {
                src: 'http://127.0.0.1:8090/video/random?t='+Math.random()
            }

            constructor(props){
                super(props);
                //这里获取 props 的值 
                console.log('构造方法执行')
            }

            //必须要返回一个『布尔类型的值』
            shouldComponentUpdate(){
                console.log('组件应该要更新了');
                return true;
            }

            componentWillUpdate(){
                console.log('组件将要更新了');
            }

            //渲染
            render(){
                console.log('挂载中, 渲染中...')
                return <div className="video-container" onClick={this.change}>
                    <button onClick={this.force}>强制更新</button>
                        <video width="100%" 
                            src={this.state.src}
                            controls
                            autoPlay
                        ></video>
                    </div>
            }

            componentDidUpdate(){
                console.log('组件更新完毕');
            }

            change = () => {
                this.setState({
                    src: 'http://127.0.0.1:8090/video/random?t='+Date.now()
                })
            }

            force = () => {
                //强制更新
                this.forceUpdate();
            }
        }

        //获取按钮
        let btns = document.querySelectorAll("button")

        btns[0].onclick = function(){
            ReactDOM.render(<App />,document.querySelector("#root"));
        }
    </script>
</body>
</html>